<template>
  <div class="search-box">
    <div class="search-herder">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          clearable
          placeholder="地点/酒店/关键字"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
      <!-- 历史 -->
      <div class="historusearch-box">
        <div class="searchhis">
          <img
            src="https://source.qunarzz.com/site/images/zhuanti/huodong/history.png"
            alt=""
          />
          <p>搜索历史</p>
          <span
            >清空
            <van-icon
              class-prefix="icon"
              name="qingkong"
              style="font-size: 12px"
            />
          </span>
        </div>
        <!-- 历史记录 -->
        <van-collapse v-model="activeNames">
          <van-collapse-item title="标题2" name="1">
            <template #title>
              <div style="display: flex">
                <div class="biaoti">
                  <span class="my-block active"> 旧金山</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 大通中心</span>
                </div>
              </div>
            </template>
            <div class="jilu">
              <div class="citys-list">
                <ul class="citys-list">
                  <li class="my-block active">旧金山</li>
                  <li class="my-block">大通中心</li>
                  <li class="my-block active">旧金山</li>
                  <li class="my-block">大通中心</li>
                  <li class="my-block">大通中心</li>
                  <li class="my-block active">旧金山</li>
                  <li class="my-block">大通中心</li>
                </ul>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>

        <!-- 大家都搜 -->
        <div class="searchhis">
          <img
            src="https://source.qunarzz.com/site/images/zhuanti/huodong/guess.png"
            alt=""
          />
          <p>大家都在搜</p>
          <!-- <span @click="isExpanded = !isExpanded"
            >展开
            <van-icon name="arrow-down" />
          </span> -->
        </div>
        <!-- 都搜内容 -->
        <van-collapse v-model="activeNames">
          <van-collapse-item title="标题2" name="2">
            <template #title>
              <div style="display: flex">
                <div class="biaoti">
                  <span class="my-block active"> 西湖风景名胜区</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 杭州东站</span>
                </div>
              </div>
              <div style="display: flex">
                <div class="biaoti">
                  <span class="my-block active"> 萧山国际机场</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 千岛湖景区</span>
                </div>
              </div>
            </template>
            
            <div class="jilu">
              <div class="citys-list">
                <ul class="citys-list">
                  <li class="my-block active">武林广场</li>
                  <li class="my-block">灵隐寺</li>
                  <li class="my-block active">龙翔桥地铁站</li>
                  <li class="my-block">西溪国家湿地公园</li>
                  <li class="my-block">杭州站</li>
                  <li class="my-block active">钱塘新城</li>
                  <li class="my-block">杭州湖滨银泰</li>
                </ul>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
        <!-- 热门品牌 -->
        <div class="searchhis">
          <img
            src="https://source.qunarzz.com/site/images/zhuanti/huodong/brandhotel.png"
            alt=""
          />
          <p>热门品牌</p>
          <!-- <span @click="isExpanded = !isExpanded"
            >展开
            <van-icon name="arrow-down" />
          </span> -->
        </div>


        <van-collapse v-model="activeNames">
          <van-collapse-item title="标题2" name="3">
            <template #title>
              <div style="display: flex">
                <div class="biaoti">
                  <span class="my-block active"> 全季</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 亚朵</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 如家</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 全季</span>
                </div>
              </div>
                
            </template>

            <div class="jilu">
            <div class="citys-list">
                <ul class="citys-list">
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block active">如家</li>
                </ul>
                <ul class="citys-list">
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                </ul>
            </div>
            </div>
          </van-collapse-item>
        </van-collapse>
        <!-- 机场车站 -->
        <div class="searchhis">
          <img
            src="https://source.qunarzz.com/site/images/zhuanti/huodong/airport.png"
            alt=""
          />
          <p>机场车站</p>
        </div>

        <van-collapse v-model="activeNames">
          <van-collapse-item title="标题2" name="4">
            <template #title>
              <div style="display: flex">
                <div class="biaoti">
                  <span class="my-block active"> 萧山国际机场</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 千岛湖通用机场</span>
                </div>
                </div>
                <div style="display: flex">
                <div class="biaoti">
                  <span class="my-block active"> 杭州机场</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 杭州站</span>
                </div>
              </div>
                
            </template>

            <div class="jilu">
            <div class="citys-list">
                <ul class="citys-list">
                <li class="my-block active">杭州南站</li>
                <li class="my-block">杭州南站</li>
                <li class="my-block active">杭州南站</li>
                <li class="my-block active">杭州南站</li>
                <li class="my-block active">杭州南站</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                </ul>
            </div>
            </div>
          </van-collapse-item>
        </van-collapse>

        <!-- 地铁站点 -->
        <div class="searchhis">
          <img
            src="https://source.qunarzz.com/site/images/zhuanti/huodong/subway.png"
            alt=""
          />
          <p>地铁站点</p>
        </div>

        <van-collapse v-model="activeNames">
          <van-collapse-item title="标题2" name="5">
            <template #title>
              <div style="display: flex">
                <div class="biaoti">
                  <span class="my-block active"> 全季</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 亚朵</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 如家</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 全季</span>
                </div>
              </div>
                
            </template>

            <div class="jilu">
            <div class="citys-list">
                <ul class="citys-list">
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block active">如家</li>
                </ul>
                <ul class="citys-list">
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                </ul>
            </div>
            </div>
          </van-collapse-item>
        </van-collapse>

        <!-- 热门景点 -->
        <div class="searchhis">
          <img
            src="https://source.qunarzz.com/site/images/zhuanti/huodong/hotscence.png"
            alt=""
          />
          <p>热门景点</p>
          <!-- <span @click="isExpanded = !isExpanded"
            >展开
            <van-icon name="arrow-down" />
          </span> -->
        </div>


        <van-collapse v-model="activeNames">
          <van-collapse-item title="标题2" name="6">
            <template #title>
              <div style="display: flex">
                <div class="biaoti">
                  <span class="my-block active"> 全季</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 亚朵</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 如家</span>
                </div>
                <div class="biaoti">
                  <span class="my-block active"> 全季</span>
                </div>
              </div>
                
            </template>

            <div class="jilu">
            <div class="citys-list">
                <ul class="citys-list">
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block active">如家</li>
                </ul>
                <ul class="citys-list">
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block active">全季</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                <li class="my-block">亚朵</li>
                <li class="my-block active">如家</li>
                </ul>
            </div>
            </div>
          </van-collapse-item>
        </van-collapse>

        

      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  name: "searchpage",
  data() {
    return {
      activeNames: ["0"],
      value: "",
      isExpanded: false,
    };
  },
  components: {},
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.search-herder {
  width: 100%;
  height: 44px;
}
.historusearch-box {
  width: 95%;
  height: 100%;
  margin: 0 auto;
  .searchhis {
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    color: #3b3a3a;
    background: #fff;
    position: relative;
  }
  .searchhis > img {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 10px;
  }
  .searchhis > p {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    color: black;
    left: 30px;
  }
  .searchhis > span {
    /* width: 22px;
    height: 22px; */
    font-size: 13px;
    float: right;
  }
}
.biaoti {
    width: auto;
    height: auto;
  padding: 0px 20px;
}

.jilu {
  height: 60px;
  .citys-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .active{ 
    margin-left: 0px 10px;
    background: rgba(10,196,221,.1);
    }
    .my-block{
        width: 70px;
        margin:0 0 8px 8px;
        display: inline-block;
        color: #3b3a3a;
        background: #f7f7f7;
        border-radius: 15px;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border-color: #f7f7f7;
      }
  }
}
</style>
